<template>
  <el-dialog
    :append-to-body="true"
    :before-close="cancel"
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="boxDialogVisible"
    class="tree-dialog-form scrollbar selectBox"
    heihgt="607px"
    width="686px"
  >
    <div class="box">
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="sitename" label="名称" />
        <el-table-column prop="sitecode" label="编码" />
        <el-table-column prop="position" label="位置" />
        <el-table-column prop="manager" label="负责人" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="sortName" label="排序" />
      </el-table>
      <pagination />
    </div>
    <div class="dialog-footer" style="text-align: right; padding: 20px">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button @click="save" size="small" type="primary"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import crudIotSite from '@/api/iot/iotSite'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'


export default {
  name: "SelectSiteList",
  components: { pagination, crudOperation},
  mixins: [presenter(), header(), crud()],
  props: {
    title: {
      type: String,
      default() {
        return "";
      }
    },
    boxDialogVisible: {
      type: Boolean,
      default() {
        return false;
      }
    },
    multi: {
      type: Boolean,
      default() {
        return false;  // 默认单选 
      }
    }
  },
  cruds() {
    return CRUD({ 
                  title: '场地选择', 
                  url: 'iot/site', 
                  sort: 'sortName,asc', 
                  multi: this.propsData.multi,
                  crudMethod: { ...crudIotSite }})
  },    
  data() {
    return {
      
    };
  },
  computed: {},
  mounted() {},
  created() {},

  watch: {
    boxDialogVisible(value) {
      if (value) {
        this.init();
      }
    }
  },

  methods: {
    /*
      当搜索框对焦时
    */
    onFocus() {
      const search = document.getElementsByClassName("select-box-search")[0];
      search.onclick = () => this.search();
    },
    search() {
    },
    /*
      回车
    */
    enter() {
      return this.search();
    },
    /*
      初始化
    */
    init() {
    },
    cancel() {
      this.$emit("close", false);
    },    
    save() {
      this.$emit("save", this.crud.selections);
    },
    // 初始化数据
    initData() {
    }
  }
};
</script>

<style lang="less">
</style>
